<template>
  <div class="driver">

    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
            <template>
              <div class="back">
                <!-- <nav><span @click="$router.back()"><i class="el-icon-arrow-left" /></span>返回 <div data-v-fadabbee="" class="el-divider el-divider--vertical" /> <span style="font-weight: 700;">司机详情</span></nav> -->
                <el-page-header content="车辆详情" @back="$router.back()" />
              </div>
            </template>
          </div></el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="box">
          <!-- <el-row class="driverRow">
        <el-button type="text" @click="showEssential = true">基本信息</el-button>
        <el-button type="text" @click="showEssential = false">驾驶证信息</el-button>
        <hr>1
      </el-row> -->
          <el-menu style="padding-left: 40px;" active-text-color="black" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">基本信息</el-menu-item>
            <el-menu-item index="2">行驶证信息</el-menu-item>
          </el-menu>
          <div class="line" />
          <!-- 基本信息 -->
          <div v-if="showEssential" class="essential">
            <!-- 编辑状态 -->
            <el-row v-if="isShowEdit">
              <el-form :inline="true" class="demo-form-inline" :model="truckInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆编号:">
                      <el-input v-model="truckInfo.id" :disabled="true" style="border: none;" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车牌号码:">
                      <el-input v-model="truckInfo.licensePlate" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item prop="truckTypeId" label="车型名称">
                      <el-select v-model="truckInfo.truckTypeId" placeholder="请选择">
                        <el-option
                          v-for="item in cart_type"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆体积:">
                      <el-input v-model="truckInfo.allowableVolume" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆载重:">
                      <el-input v-model="truckInfo.allowableLoad" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="GPSID:">
                      <el-input v-model="truckInfo.deviceGpsId" />
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      :auto-upload="true"
                      action=""
                      list-type="picture-card"
                      :limit="2"
                      :file-list="truckFileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-exceed="upImgLimit"
                    >
                      <!-- :on-success="handleAvatarSuccess" -->
                      <i class="el-icon-plus" />
                    </el-upload>

                  </div>
                  <p style="color: #bac5dc; font-size: 12px;">
                    注：图片不限大小不限格式,建议上传400*400尺寸的图片,最多上传2张
                  </p>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div></el-col>

              </el-row>
            </el-row>
            <!-- 查看状态 -->
            <el-row v-else>
              <el-form :inline="true" class="demo-form-inline" :model="truckInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆编号:">
                      <!-- <el-input v-model="truckInfo.userId"  style="border: none;" /> -->
                      <span>{{ truckInfo.id }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车牌号码:">
                      <!-- <el-input v-model="truckInfo.name"  /> -->
                      <span>{{ truckInfo.licensePlate }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车型名称:">
                      <!-- <el-input v-model="truckInfo.agency.name"  /> -->
                      <span>{{ truckInfo.truckTypeName }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆体积:">
                      <!-- <el-input v-model="truckInfo.mobile"  /> -->
                      <span>{{ truckInfo.allowableVolume }} m</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="车辆载重:">
                      <!-- <el-input v-model="truckInfo.age" /> -->
                      <span>{{ truckInfo.allowableLoad }} 吨</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="GPSID:">
                      <!-- <el-input v-model="truckInfo.age" /> -->
                      <span>{{ truckInfo.deviceGpsId }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <!-- <span>图片信息</span>
                  <img
                    style="width: 200px; vertical-align: top;"
                    :src="truckInfo.picture"
                  > -->
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      :auto-upload="true"
                      action=""
                      list-type="picture-card"
                      :limit="2"
                      :file-list="truckFileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :disabled="true"
                    >
                      <!-- :on-success="handleAvatarSuccess"
                      <i class="el-icon-plus" /> -->
                    </el-upload>
                  </div>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                  <!-- <el-button type="text">图片信息</el-button>
                  <div class="demo-image__preview">
                    <el-image
                      v-for="(item,index) in truckFileList"
                      :key="index"
                      style="width: 100px; height: 100px"
                      :src="item.url"
                      :preview-src-list="item.url"
                    />
                  </div> -->

                </div></el-col>

              </el-row>
            </el-row>
          </div>
          <!-- 行驶证信息 -->
          <div v-else class="essential">
            <!-- 编辑状态 -->
            <el-row v-if="isShowEdit">
              <el-form :inline="true" class="demo-form-inline" :model="truckLicenseInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="行驶证号码:">
                      <el-input v-model="truckLicenseInfo.transportCertificateNumber" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="发动机号码:">
                      <el-input v-model="truckLicenseInfo.engineNumber" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="注册时间:">
                      <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker
                          v-model="truckLicenseInfo.registrationDate"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                        />
                      </div>
                      <!-- <el-input v-model="truckLicenseInfo.registrationDate" /> -->
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="强制报废日期:">
                      <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker
                          v-model="truckLicenseInfo.mandatoryScrap"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                        />
                      </div>
                      <!-- <el-input v-model="truckLicenseInfo.mandatoryScrap" /> -->
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="整备质量:">
                      <el-input v-model="truckLicenseInfo.overallQuality" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="检验有效期:">
                      <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker
                          v-model="truckLicenseInfo.expirationDate"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                        />
                      </div>
                      <!-- <el-input v-model="truckLicenseInfo.expirationDate" /> -->
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="核定载重量:">
                      <el-input v-model="truckLicenseInfo.allowableWeight" />
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="有效期:">
                      <div class="block">
                        <!-- <span class="demonstration">默认</span> -->
                        <el-date-picker
                          v-model="truckLicenseInfo.validityPeriod"
                          type="date"
                          placeholder="选择日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                        />
                      </div>
                      <!-- <el-input v-model="truckLicenseInfo.validityPeriod" /> -->
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      :auto-upload="true"
                      action="#"
                      :limit="2"
                      list-type="picture-card"
                      :file-list="fileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"

                      :on-exceed="upImgLimit"
                    >
                      <!-- :on-success="handleAvatarSuccess" -->
                      <i class="el-icon-plus" />
                    </el-upload>
                  </div>
                  <p style="color: #bac5dc; font-size: 12px;">
                    注：图片不限大小不限格式,建议上传400*400尺寸的图片,最多上传2张
                  </p>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </div></el-col>

              </el-row>
            </el-row>
            <!-- 查看状态 -->
            <el-row v-else>
              <el-form :inline="true" class="demo-form-inline" :model="truckLicenseInfo">
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="行驶证号:">
                      <!-- <el-input v-model="truckLicenseInfo.transportCertificateNumber" /> -->
                      <span> {{ truckLicenseInfo.transportCertificateNumber }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="发动机号码:">
                      <span> {{ truckLicenseInfo.engineNumber }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="注册时间:">
                      <span> {{ truckLicenseInfo.registrationDate }}</span>                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="强制报废日期:">
                      <span> {{ truckLicenseInfo.mandatoryScrap }}</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="整备质量:">
                      <span> {{ truckLicenseInfo.overallQuality }} 吨</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="检验有效期:">
                      <span> {{ truckLicenseInfo.expirationDate }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
                <el-row>

                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="核定载重量:">
                      <span> {{ truckLicenseInfo.allowableWeight }} 吨</span>
                    </el-form-item>
                  </div></el-col>
                  <el-col :span="8"><div class="grid-content bg-purple">
                    <el-form-item label="有效期:">
                      <span> {{ truckLicenseInfo.validityPeriod }}</span>
                    </el-form-item>
                  </div></el-col>
                </el-row>
              </el-form>
              <el-row>
                <el-col :span="8"><div class="grid-content bg-purple">
                  <div style="width: 1000px; display: flex; flex-wrap: nowrap;">

                    <el-button type="text">图片信息</el-button>
                    <el-upload
                      ref="upImg"
                      :auto-upload="true"
                      action=""
                      list-type="picture-card"
                      :limit="2"
                      :file-list="fileList"
                      :http-request="uploadImg"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :disabled="true"
                    >
                      <!-- :on-success="handleAvatarSuccess" -->
                      <!-- <i class="el-icon-plus" /> -->
                    </el-upload>
                  </div>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                  <!-- <div class="demo-image__placeholder">
                    <div class="block">
                      <span class="demonstration">默认</span>
                      <el-image
                        v-for="(item,index) in fileList"
                        :key="index"
                        :src="item.url"
                      />
                    </div>
                  </div> -->
                </div></el-col>

              </el-row>
            </el-row>
          </div>

        </div>

      </el-main>
      <el-footer>
        <el-row v-if="isShowEdit">
          <el-button type="primary" @click="btnSave">保存</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-row>
        <el-row v-else>
          <el-button type="primary" @click="isShowEdit=true">编辑</el-button>
        </el-row>
      </el-footer>

    </el-container>
    <!-- 头 -->

  </div>
</template>

<script>
import {
  getTruckInfo,
  getTruckLicenseInfo,
  editTruckLicenseInfo,
  editTruckInfo,
  getCart_typeList,
  imageUpload

} from '@/api/cart'

export default {
  components: {

  },
  props: [],
  data() {
    return {

      fileList: [], // 行驶证回显图片列表
      truckLicensePicture: [], // 行驶证信息图片地址储存
      truckPicture: [], // 车辆基本信息图片地址储存
      truckFileList: [], // 基本信息回显图片列表
      truckPictureObj: {}, // 基本信息图片对象
      truckLicensePictureObj: {}, // 行驶证信息图片对象
      dialogVisible: false,
      dialogImageUrl: '',

      disabled: false,
      activeIndex: '1',
      key: '1', // 辨别是哪个模块
      showEssential: true, // 控制显示 隐藏基本信息 驾驶证信息
      isShowEdit: false, // 控制是否为编辑状态
      truckInfo: {}, // 车辆基本信息
      truckInfoBackup: {}, // 车辆信息备份数据
      truckLicenseInfo: {}, // 车辆行驶证信息
      truckLicenseInfoBackup: {}, // 车辆行驶证信息备份数据
      truckInfoId: null, // 储存获取的id
      cart_type: '' // 车型列表
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTruckInfo()
    this.getTruckLicenseInfo()
    this.getCart_typeList()
  },
  mounted() {

  },
  updated() {

  },
  destroyed() {

  },
  activated() {

  },
  methods: {
    // 替代默认的上传行为
    async uploadImg(file) {
      if (this.key === '1') {
        this.truckPictureObj = {}
        console.log(file)
        console.log(file.file)
        const formData = new FormData()
        formData.append('file', file.file)
        console.log(formData)
        const result = await imageUpload(formData)
        console.log(result)
        this.truckPictureObj.uid = file.file.uid
        this.truckPictureObj.status = 'success'
        this.truckPictureObj.url = result
        this.truckFileList.push(this.truckPictureObj)
        console.log(this.truckFileList)
      }
      if (this.key === '2') {
        this.truckLicensePictureObj = {}
        const formData = new FormData()
        formData.append('file', file.file)
        console.log(formData)
        const result = await imageUpload(formData)
        console.log(result)
        this.truckLicensePictureObj.uid = file.file.uid
        this.truckLicensePictureObj.status = 'success'
        this.truckLicensePictureObj.url = result
        this.fileList.push(this.truckLicensePictureObj)
        console.log(this.fileList)
      }
    },
    // async handleAvatarSuccess(res, file) {
    //   if (res.errorCode === 200) {
    //     this.fileArray.push(res.result) // 这点我们把没次上传成功的图片地址装到 fileArray里面 (我这点是收集起所有上传的图片地址，后面点击提交的时候传给后端)
    //     // const filess = await imageUpload(file)
    //     // console.log(filess)
    //     // console.log(filess.msg)
    //     this.tool.Messages(this, 'success', '上传成功！') // 这是我封装的消息提示，可以不用管
    //   } else {
    //     this.tool.Messages(this, 'error', '上传失败！')
    //   }
    // },
    // 上传之前
    // 上传图片超出限制时
    upImgLimit() {
      this.$message.error('最多上传两张图片')
    },
    // 删除图片
    handleRemove(file, fileList) {
      if (this.key === '1') {
        // console.log('删之前' + `${this.truckPicture}`)
        // const index = this.truckPicture.findIndex(item => {
        //   item.uid === file.uid
        // })
        // this.truckPicture.splice(index, 1)
        // console.log(file)
        // console.log('删之后' + `${this.truckPicture}`)
        console.log(file)
        console.log(this.truckFileList)
        const index = this.truckFileList.findIndex(item => {
          return item.uid === file.uid
        })
        console.log(index)
        this.truckFileList.splice(index, 1)
        console.log(this.truckFileList)
      } if (this.key === '2') {
        const index = this.fileList.findIndex(item => {
          return item.uid === file.uid
        })
        console.log(index)
        this.fileList.splice(index, 1)
        console.log(this.fileList)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      console.log(file)
      this.dialogImageUrl = file.url
    },

    // 获取车型信息列表
    async getCart_typeList() {
      const result = await getCart_typeList()
      // console.log(result)
      this.cart_type = result
      // console.log(this.cart_type)
    },
    // 基本信息
    async getTruckInfo() {
      // this.showEssential = true
      this.truckInfoId = this.$route.query.id
      // console.log(this.truckInfoId)
      const result = await getTruckInfo(this.truckInfoId)
      console.log(result)
      this.truckInfo = result
      this.truckInfoBackup = JSON.parse(JSON.stringify(result)) // 使用深拷贝备份数据
      // 判断返回数据中是否有url地址  将地址放入地址数组中 便于保存时上传地址
      if (result.picture) {
        this.truckPicture = result.picture.split(',')
        console.log(this.truckPicture)
        this.truckFileList = result.picture.split(',')
        console.log(this.truckFileList)
        this.truckFileList = this.truckFileList.map((item) => {
          const obj = {}
          obj.url = item
          return obj
        })
        console.log(this.truckFileList)
      }
    },
    // 行驶证信息
    async getTruckLicenseInfo() {
      // this.showEssential = false
      this.truckInfoId = this.$route.query.id
      // console.log(this.truckInfoId)
      const result = await getTruckLicenseInfo(this.truckInfoId)
      console.log(result)
      this.truckLicenseInfo = result
      this.truckLicenseInfoBackup = JSON.parse(JSON.stringify(result)) // 使用深拷贝备份数据
      // 判断返回数据中是否有url地址  将地址放入地址数组中 便于保存时上传地址
      if (result.picture) {
        this.truckLicensePicture = result.picture.split(',')
        this.fileList = result.picture.split(',')
        this.fileList = this.fileList.map((item) => {
          const obj = {}
          obj.url = item
          return obj
        })
        console.log(this.fileList)
      }
    },
    // 点击上方导航做的事情  判断是哪个模块
    handleSelect(key, keyPath) {
      this.key = key
      if (key === '1') {
        this.showEssential = true
        this.isShowEdit = false
      } if (key === '2') {
        this.showEssential = false
        this.isShowEdit = false
      }
    },
    // 点击保存
    async btnSave() {
      if (this.key === '1') {
        this.truckInfo.userId = this.truckInfoId
        this.truckInfo.picture = this.truckFileList.map(item => item.url).join(',')
        // this.truckInfo.picture = this.truckFileList.join(',')
        // console.log(this.truckInfo.picture)
        // console.log(this.truckFileList)
        await editTruckInfo(this.truckInfo)
        this.getTruckInfo()
        this.isShowEdit = false
        this.$message.success('基本信息保存成功')
      } if (this.key === '2') {
        this.truckLicenseInfo.truckId = this.truckInfoId
        // console.log(this.truckLicenseInfo.truckId)
        // 上传到服务器的图片地址转换为字符串加入参数中传递
        this.truckLicenseInfo.picture = this.fileList.map(item => item.url).join(',')
        await editTruckLicenseInfo(this.truckLicenseInfo)
        this.getTruckLicenseInfo()
        this.isShowEdit = false
        this.$message.success('行驶证信息保存成功')
      }
    },

    // 点击取消
    btnCancel() {
      if (this.key === '1') {
        this.truckInfo = this.truckInfoBackup
        // 虽使用深浅拷贝替换原有数据但是只生效一次  所以还是需要从新渲染一次
        this.getTruckInfo()
      } if (this.key === '2') {
        this.truckLicenseInfo = this.truckLicenseInfoBackup
        this.getTruckLicenseInfo()
      }
      this.isShowEdit = false
    }
  }
}
</script>
<style lang='scss' scoped>
.bg-purple-dark{
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
  padding-left: 20px;
}
.driverRow{
  margin-top: 20px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #fff;
  margin-bottom: 20px;
}
.el-button{
  height: 50px;
  margin-right: 30px;
  color:black;
}
.essential{
  padding-left:60px;
  padding-top: 20px;
}
.box{
  background-color: #fff;
  height: 500px;
}
.el-header, .el-footer {
    background-color: #fff;
    // color: #333;
    text-align: center;
    line-height: 60px;
  }
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 200px;
  height: 200px;
}

</style>
